// 注册页面
<template>
  <div class="container">
    <regiter-top></regiter-top>

    <div class="w1200">
      <div class="w266">
        <el-button
          v-for="(item,index) in nav"
          :key="item.id"
          :class=" item.id == actives ? 'active' : ''"
          @click="changesActive($event,index)"
        >{{ item.name }}</el-button>
      </div>
      <!-- <div style="color:#ff7200;font-size:12px;line-height:40px;text-align: center;">
        <i class="el-icon-star-on"></i>
        温馨提示 : {{ Tips }}
      </div> -->
      <div class="fromList">
        <div class="fromListk" v-show="!actives">
          <enterprise-user></enterprise-user>
        </div>
        <div class="fromListk" v-show="actives">
          <personal-user></personal-user>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import regiterTop from "./components/RegiterTop"; //注册页面的顶部
import enterpriseUser from "./components/EnterpriseUser"; //企业用户
import personalUser from "./components/PersonalUser"; //个人用户
export default {
  name: "register",
  data() {
    return {
      actives: 0,

      nav: [
        {
          name: "我是企业用户",
          id: 0
        },
        {
          name: "我是个人用户",
          id: 1
        }
      ],
      Tips: "企业用户注册即享98折"
    };
  },

  methods: {
    changesActive(ev, index) {
      this.actives = index;
    }
  },

  components: {
    regiterTop, //注册页面的顶部
    enterpriseUser, //企业用户
    personalUser //个人用户
  }
};
</script>
<style lang="scss" scoped>
.container {
  background: #f3f3f3;

  .w1200 {
    width: 1200px;
    background: #fff;
    margin: auto;
    margin-top: 35px;
    border-top: 2px solid #409eff;

    .w266 {
      width: 266px;
      margin: auto;
      margin-top: 56px;
      margin-bottom: 16px;

      .active {
        background: rgba($color: #409eff, $alpha: 0.1);
        color: #409eff;
      }
    }

    .fromList {
      width: 100%;
      margin: auto;
      padding-top: 20px;
      border-top: 1px solid #f5f5f5;

      .fromListk {
        width: 60%;
        margin: auto;
      }
    }
  }
}
</style>
